<template>
	<PageWrapper title="使用usetable创建的简单表格">
		<div class="p-4">
			<div class="mb-4">
				<a-button class="mr-2" @click="getTableData"> 获取表格数据 </a-button>
				<a-button class="mr-2" @click="getTableRawData"> 获取接口原始数据 </a-button>
			</div>
			<div class="mb-4">
				<a-button type="primary" class="mr-2" @click="getSelectRowList"> 获取选中行 </a-button>
				<a-button class="mr-2" @click="getSelectRowKeyList"> 获取选中行Key </a-button>
			</div>
		</div>
		<BasicTable @register="registerTable">
			<template #bodyCell="{ column, text }">
				<template v-if="column.dataIndex === 'status'">
					<a :style="statusFilter(text).style" style="font-weight: 700">{{ statusFilter(text).text }}</a>
				</template>
			</template>
		</BasicTable>
	</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { getLicenceList } from '@/api/demo';
import { BasicTable, PageWrapper } from '#/components';
import { useTable } from '#/hooks';
import { useMessage } from '@/hooks/web/useMessage';

/**
 * 1. 如果 @param dataIndex 和 @param key 值一样，且都是字符串或数字，则可省略其中一个
 */
const columns = [
	{
		title: '证照名称',
		dataIndex: 'licenseName',
	},
	{
		title: '证照ID',
		dataIndex: 'licenseIdstr',
	},
	{
		title: '申请人',
		dataIndex: 'applicantName',
	},
	{
		title: '颁发时间',
		dataIndex: 'awardDate',
	},
	{
		title: '到期时间',
		dataIndex: 'expireDate',
	},
	{
		title: '状态',
		dataIndex: 'status',
	},
];

export default defineComponent({
	name: 'SimpleUseTable',
	components: { BasicTable, PageWrapper },
	setup() {
		const { createMessage } = useMessage();
		const [registerTable, { getSelectRows, getDataSource, getRawDataSource, getSelectRowKeys }] = useTable({
			title: '证照管理',
			columns,
			showIndexColumn: true,
			canResize: false,
			api: getLicenceList,
			loading: true,
			rowSelection: {
				type: 'checkbox',
			},
		});

		function statusFilter(status: number) {
			const arr = [
				{ text: '已过期', style: { color: '#d65959' } },
				{ text: '申请中', style: { color: '#c39812' } },
				{ text: '生效中', style: { color: '#e8c589' } },
			];
			return arr[status];
		}

		function getTableData() {
			createMessage.info('请在控制台查看！');
			console.log(getDataSource());
		}

		function getTableRawData() {
			createMessage.info('请在控制台查看！');
			console.log(getRawDataSource());
		}

		function getSelectRowList() {
			createMessage.info('请在控制台查看！');
			console.log(getSelectRows());
		}

		function getSelectRowKeyList() {
			createMessage.info('请在控制台查看！');
			console.log(getSelectRowKeys());
		}

		return {
			registerTable,
			statusFilter,
			getSelectRowList,
			getTableData,
			getTableRawData,
			getSelectRowKeyList,
		};
	},
});
</script>
